<template>
	<view class="page">
		<view class="header">
			<view class="search">
				<image src="@/static/icons/jewel/search.png" mode="" class="search_glass"></image>
				<input type="text" value="" class="search_input" placeholder="搜索" @confirm="search_keyword"/>
			</view>
		</view>
		<view class="listbox">
			<!-- <view class="goodslist"></view> -->
			<view class="goods_train">
				<view class="goods" v-for="(item, index) in datalist" :key="index" v-if="index%2==0">
					<navigator :url="'/pages/jewel/goods/show?goods_id='+item.id">
						<image :src='item.thumb' class="goodsimage" mode="widthFix"></image>
						<view class="goodsname">{{item.goods_name}}</view>
					</navigator>
				</view>
			</view>
			<view class="goods_train">
				<view class="goods" v-for="(item, index) in datalist" :key="index" v-if="index%2==1">
					<navigator :url="'/pages/jewel/goods/show?goods_id='+item.id">
						<image :src='item.thumb' class="goodsimage" mode="widthFix"></image>
						<view class="goodsname">{{item.goods_name}}</view>
					</navigator>
				</view>
			</view>
		</view>
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
		<view class="m-no-data" v-if="showNodata">
			<image src="../../../static/images/no_data.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
import henglang from '@/common/common_zb.js';
export default {
	data() {
		return {
			showNodata: false,
			loadtype: 'normal',	// 加载数据方式
			datalist: [],	// 列表数据
			page: 1,
			totalPages: 1,
			bIsShowLoading: false,
			search_data: {}
		}
	},
	onLoad(options) {
		this.search_data.is_seo_zone = 1;
		this.search_data.page = this.page;
		this.getList(this.search_data);
	},
	// 上拉加载
	onReachBottom(){
		this.loadtype = 'plus';
		this.page++;
		this.search_data.page = this.page;
		if(this.datalist.length === 0) return false
		this.getList(this.search_data);
	},
	methods: {
		// 获取键盘事件，搜索关键字
		search_keyword(e){
			let keyword = e.target.value;
			this.loadtype = 'normal';
			this.search_data.keyword = keyword;
			this.getList(this.search_data);
		},
		getList(data){
			let that = this;
			if(that.page <= that.totalPages){
				that.bIsShowLoading = true;
				henglang.post('goods/searchGoods', data, false,function(res){
					let data = res.data;
					let count = data.count;
					if(count === 0){
						that.showNodata = true;
					}else{
						that.showNodata = false;
					};
					if(that.loadtype == 'plus') {
						that.datalist = that.datalist.concat(data.data);
					}else{
						that.datalist = data.data;
						that.totalPages = data.total_pages;
						uni.stopPullDownRefresh();
					}
					if(that.is_load == 0) {	// 首次加载才获取分类属性
						that.is_load = 1;
						resolve(that.cat_id);	// 分类id
					}
					that.bIsShowLoading = false;
				})
			}else{
				return false
			}
		},
	}
}
</script>

<style>
.page{
	background: #f4f2f2;
	width: 100%;
	height: 100%;
}
.header{
	height: 104rpx;
	width: 100%;
	overflow: hidden;
}
.search{
	width: 95%;
	height: 67rpx;
	margin: 0 auto;
	margin-top: 18rpx;
	background: #fff;
	border-radius: 10rpx;
}
.search_glass{
	float: left;
	width: 33rpx;
	height: 33rpx;
	margin: 18rpx 19rpx 0rpx 19rpx;
}
.search_input{
	height: 100%;
	width: 100%;
	float: left;
	width: 80%;
}
.listbox{
	background: #fff;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding-top: 11px;
}
.goodslist{
	width: 95%;
	margin: 0 auto;
	height: 100%;
	overflow: hidden;
}
.goods_train{
	width: 50%;
}
.goods_train:nth-child(odd){
	float: left;
}
.goods_train:nth-child(even){
	float: right;
}
.goods_train:nth-child(odd) .goods{
	margin-left: 13px;
}
.goods_train:nth-child(even) .goods{
	margin-left: 7px;
}
.goods{
	box-shadow: 0 0 20rpx #ccc;
	width: 90%;
	margin: 0 auto;
	height: auto;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
}
.goodsimage{
	width: 100%;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
}
.goodsname{
	color: #9a9a9a;
	font-size: 30rpx;
	line-height: 44rpx;
	max-height: 88rpx;
	width: 90%;
	margin: 0 auto;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	padding-bottom: 6px;
}
.m-no-data image {
	width: 100%;
	height: 100%;
}

</style>
